import React from 'react';
import seat1 from '@/assets/1.svg';
import seat2 from '@/assets/2.svg';
import seat3 from '@/assets/3.svg';
import seat4 from '@/assets/4.svg';
import useDrag from '../useDrag';

export default () => {
    function handleStartDrag(shapeName: string, e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
        useDrag.startDrag(shapeName, e);
    }

    function handleStartGroupDrag(shapeName: string, e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
        useDrag.startGroupDrag(shapeName, e);
    }

    return (
        <div className='left-container'>
            <div className='base-icon'>
                <div className='move-icon' onMouseDown={(e) => handleStartDrag('top-left-seat', e)}>
                    <img src={seat1} />
                </div>
                <div className='move-icon' onMouseDown={(e) => handleStartDrag('bottom-left-seat', e)}>
                    <img src={seat2} />
                </div>
                <div className='move-icon' onMouseDown={(e) => handleStartDrag('top-right-seat', e)}>
                    <img src={seat3} />
                </div>
                <div className='move-icon' onMouseDown={(e) => handleStartDrag('bottom-right-seat', e)}>
                    <img src={seat4} />
                </div>
            </div>
            <div className='group-icon'>
                <div className='group' onMouseDown={(e) => handleStartGroupDrag('group-square', e)}>
                    <img className='icon' src={seat1} />
                    <img className='icon' src={seat3} />
                    <img className='icon' src={seat2} />
                    <img className='icon' src={seat4} />
                </div>
            </div>
        </div>
    );
};
